<script setup lang="ts">
import type { ColumnProperty } from "./type";
const props = defineProps<{
  list: any[];
  columns: ColumnProperty[];
}>();

const options = {
  size: 40,
  page: 0,
  total: props.list.length,
};
options.page = Math.ceil(options.total / options.size);
const infoList = ref<any[]>(props.list);
const timer = ref<number | null>(null);
// loop();
function loop(page: number = 0) {
  if (page > options.page) return cancelAnimationFrame(timer.value!);
  timer.value = requestAnimationFrame(animation);

  function animation() {
    const list = props.list.slice(page * options.size, ++page * options.size);
    infoList.value = infoList.value.concat(list);
    loop(page);
  }
}
</script>
<template>
  <div class="time_slicing">
    <div class="thead">
      <div class="td index">序号</div>
      <div class="td" v-for="th in columns" :key="th.prop">{{ th.lab }}</div>
    </div>
    <div class="tbody">
      <div class="tr" v-for="(li, inx) in infoList" :key="inx">
        <div class="td index">{{ inx + 1 }}</div>
        <div class="td" v-for="tr in columns" :key="tr.prop">
          {{ li[tr.prop] }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.time_slicing {
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 600px;
  color: #333;
  border: 1px solid pink;
  border-radius: 4px;

  .thead {
    display: flex;
    padding: 0 12px;
    background-color: #ededed;
    .td {
      font-weight: 600;
    }
  }
  .td {
    flex: 4;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    &.index {
      flex: 1;
      // text-align: center;
    }
    &:nth-child(2) {
      flex: 2;
    }
  }
  .tbody {
    flex: 1;
    overflow-y: auto;
    .tr {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 12px;
      &:nth-child(odd) {
        background-color: #fafafa;
      }
    }
  }
}
</style>
